<template>
  <div class="home">
    <Header />
    <main class="main">
      <div class="left">
        <div class="left-top">
          <OverviewData class="info" :data="overviewData" :title="titleObj.activeTitle" />
          <div class="map">
            <MapComp />
          </div>
        </div>
        <div class="left-bottom">
          <SchoolComp class="school" :data="data" :title="titleObj.schoolTitle" />
          <StudentComp class="student" :data="data" :title="titleObj.studentTitle" />
        </div>
      </div>
      <div class="right">
        <LevelComp class="level" :data="data" :tabs="titleObj.levelTabs" />
        <QsComp class="qs" :data="data" :tabs="titleObj.qsTabs" />
      </div>
    </main>
  </div>
</template>

<script lang="ts">
// @ts-nocheck
import { Component, Vue, Watch } from 'vue-property-decorator'
import Header from './Header.vue'
import OverviewData from './OverviewData.vue'
import SchoolComp from './SchoolComp.vue'
import StudentComp from './StudentComp.vue'
import LevelComp from './LevelComp.vue'
import QsComp from './QsComp.vue'
import MapComp from './MapComp.vue'
import { getOnlineDataApi, getStatisticsListApi } from '@/api'
import { Code, Type } from '@/constant'
import { dataAutoLoop, dataTimer } from '@/config'

@Component({
  name: 'Home',
  components: {
    Header,
    OverviewData,
    SchoolComp,
    StudentComp,
    LevelComp,
    QsComp,
    MapComp
  }
})
export default class Home extends Vue {
  overviewData = {
    province: {
      label: '参评地区',
      number: 0
    },
    school: {
      label: '参评学校',
      number: 0,
      onlineLabel: '在线学校',
      onlineNumber: 0
    },
    teacher: {
      label: '参评老师',
      number: 0,
      onlineLabel: '在线老师',
      onlineNumber: 0
    },
    student: {
      label: '参评学生(有效作答)',
      number: 0,
      onlineLabel: '在线学生',
      onlineNumber: 0
    },
    patriarch: {
      label: '参评家长',
      number: 0,
      onlineLabel: '在线家长',
      onlineNumber: 0
    }
  }
  data: any = {}
  timerFn: any = null
  titleDoc = {
    1: {
      activeTitle: '省份',
      schoolTitle: '全国',
      studentTitle: '全国',
      levelTabs: [
        {
          label: '全国',
          value: 'country'
        },
        {
          label: '各省',
          value: 'province'
        },
        {
          label: '各年级',
          value: 'classes'
        },
        {
          label: '按性别',
          value: 'gender'
        }
      ],
      qsTabs: [
        {
          label: '全国',
          value: 'country'
        },
        {
          label: '各省',
          value: 'province'
        },
        {
          label: '各年级',
          value: 'classes'
        },
        {
          label: '按性别',
          value: 'gender'
        }
      ]
    },
    2: {
      activeTitle: '城市',
      schoolTitle: '各市',
      studentTitle: '各市',
      levelTabs: [
        {
          label: '全省',
          value: 'country'
        },
        {
          label: '各市',
          value: 'province'
        },
        {
          label: '各年级',
          value: 'classes'
        },
        {
          label: '按性别',
          value: 'gender'
        }
      ],
      qsTabs: [
        {
          label: '全省',
          value: 'country'
        },
        {
          label: '各市',
          value: 'province'
        },
        {
          label: '各年级',
          value: 'classes'
        },
        {
          label: '按性别',
          value: 'gender'
        }
      ]
    },
    3: {
      activeTitle: '区县',
      schoolTitle: '各区',
      studentTitle: '各区',
      levelTabs: [
        {
          label: '全市',
          value: 'country'
        },
        {
          label: '各区县',
          value: 'province'
        },
        {
          label: '各年级',
          value: 'classes'
        },
        {
          label: '按性别',
          value: 'gender'
        }
      ],
      qsTabs: [
        {
          label: '全市',
          value: 'country'
        },
        {
          label: '各区县',
          value: 'province'
        },
        {
          label: '各年级',
          value: 'classes'
        },
        {
          label: '按性别',
          value: 'gender'
        }
      ]
    },
    4: {
      activeTitle: '区域',
      schoolTitle: '各学校',
      studentTitle: '各学校',
      levelTabs: [
        {
          label: '全区',
          value: 'country'
        },
        {
          label: '各校',
          value: 'province'
        },
        {
          label: '各年级',
          value: 'classes'
        },
        {
          label: '按性别',
          value: 'gender'
        }
      ],
      qsTabs: [
        {
          label: '全区',
          value: 'country'
        },
        {
          label: '各校',
          value: 'province'
        },
        {
          label: '各年级',
          value: 'classes'
        },
        {
          label: '按性别',
          value: 'gender'
        }
      ]
    },
    5: {
      activeTitle: '班级',
      schoolTitle: '各校',
      studentTitle: '全校',
      levelTabs: [
        {
          label: '全校',
          value: 'country'
        },
        {
          label: '各年级',
          value: 'classes'
        },
        {
          label: '按性别',
          value: 'gender'
        }
      ],
      qsTabs: [
        {
          label: '全校',
          value: 'country'
        },
        {
          label: '各年级',
          value: 'classes'
        },
        {
          label: '按性别',
          value: 'gender'
        }
      ]
    }
  }

  get allData() {
    return this.$store.state.allData
  }
  get titleObj() {
    const { currentArea = 1 } = this.$store.state
    return this.titleDoc[currentArea]
  }

  @Watch('allData', {
    immediate: true,
    deep: true
  })
  handlerAllDataChange(newVal: any) {
    this.handleData(newVal)
  }

  async getStatisticsListFn() {
    let sessionData = JSON.parse(sessionStorage.getItem('vue_admin_template_permission'))
    // if (sessionData.is_all === 1) {
    //   this.$store.commit('setCurrentArea', 1)
    // } else {
    //   this.$store.commit('setCurrentArea', sessionData.is_all)
    //   const objs = sessionData.permission
    //   if (sessionData.is_all === 2) {
    //     this.$store.commit('setCurrentProvince', objs.province[0])
    //   } else if (sessionData.is_all === 3) {
    //     this.$store.commit('setCurrentProvince', objs.province[0])
    //     this.$store.commit('setCurrentCity', objs.city[0])
    //   } else if (sessionData.is_all === 4) {
    //     this.$store.commit('setCurrentProvince', objs.province[0])
    //     this.$store.commit('setCurrentCity', objs.city[0])
    //     this.$store.commit('setCountyCode', objs.area[0])
    //   } else if (sessionData.is_all === 5) {
    //     this.$store.commit('setCurrentProvince', objs.province[0])
    //     this.$store.commit('setCurrentCity', objs.city[0])
    //     this.$store.commit('setCountyCode', objs.area[0])
    //     this.$store.commit('setSchoolId', objs.school)
    //   }
    // }
    if (this.$store.state.currentArea === 1) {
      const { status, data } = await getStatisticsListApi(Type.Country)
    } else if (this.$store.state.currentArea === 2) {
      const { status, data } = await getStatisticsListApi(2, this.$store.state.currentProvince)
    } else if (this.$store.state.currentArea === 3) {
      const { status, data } = await getStatisticsListApi(3, this.$store.state.currentProvince, this.$store.state.currentCity)
    } else if (this.$store.state.currentArea === 4) {
      const { status, data } = await getStatisticsListApi(4, this.$store.state.currentProvince, this.$store.state.currentCity, this.$store.state.countyCode)
    } else if (this.$store.state.currentArea === 5) {
      const { status, data } = await getStatisticsListApi(5, this.$store.state.currentProvince, this.$store.state.currentCity, this.$store.state.countyCode, this.$store.state.school_id)
    }
    if (status === 200) {
      this.$store.commit('setAllData', data)
      // this.handleData(data)
    }
  }

  handleData(data: any) {
    this.data = data
    // 处理 参评区及j数据概览 数据
    this.getOnlineDataFn(data)
  }

  async getOnlineDataFn({
    district_number = 0,
    student_number = 0,
    teacher_number = 0,
    school_number = 0,
    parent_number = 0
  }) {
    let sessionData = JSON.parse(sessionStorage.getItem('vue_admin_template_permission'))
    // if (sessionData.is_all === 1) {
    //   this.$store.commit('setCurrentArea', 1)
    // } else {
    //   this.$store.commit('setCurrentArea', sessionData.is_all)
    //   const objs = sessionData.permission
    //   if (sessionData.is_all === 2) {
    //     this.$store.commit('setCurrentProvince', objs.province[0])
    //   } else if (sessionData.is_all === 3) {
    //     this.$store.commit('setCurrentProvince', objs.province[0])
    //     this.$store.commit('setCurrentCity', objs.city[0])
    //   } else if (sessionData.is_all === 4) {
    //     this.$store.commit('setCurrentProvince', objs.province[0])
    //     this.$store.commit('setCurrentCity', objs.city[0])
    //     this.$store.commit('setCountyCode', objs.area[0])
    //   } else if (sessionData.is_all === 5) {
    //     this.$store.commit('setCurrentProvince', objs.province[0])
    //     this.$store.commit('setCurrentCity', objs.city[0])
    //     this.$store.commit('setCountyCode', objs.area[0])
    //     this.$store.commit('setSchoolId', objs.school)
    //   }
    // }
    const { currentArea, currentProvince, currentCity, countyCode, school_id } = this.$store.state
    const params = []
    if (currentArea) {
      params.push(currentArea)
    }
    if (currentProvince) {
      params.push(currentProvince)
    }
    if (currentCity) {
      params.push(currentCity)
    }
    if (countyCode) {
      params.push(countyCode)
    }
    if (school_id) {
      params.push(school_id)
    }
    const {
      data: { status, msg, data }
    } = await getOnlineDataApi(...params)
    if (status === Code.OK) {
      const { school_num = 0, student_num = 0, teacher_num = 0, parent_num = 0 } = data
      const { province, school, teacher, student, patriarch } = this.overviewData
      this.overviewData = {
        province: {
          ...province,
          number: district_number,
          label: `参评${this.titleObj.activeTitle}`
        },
        school: {
          ...school,
          number: school_number,
          onlineNumber: school_num
        },
        teacher: {
          ...teacher,
          number: teacher_number,
          onlineNumber: teacher_num
        },
        student: {
          ...student,
          number: student_number,
          onlineNumber: student_num
        },
        patriarch: {
          ...patriarch,
          number: parent_number,
          onlineNumber: parent_num
        }
      }
    } else {
      // console.log(msg)
    }
  }

  startTimerFn() {
    this.timerFn = setInterval(() => {
      this.getStatisticsListFn()
    }, dataTimer)
  }
  clearTimerFn() {
    clearInterval(this.timerFn)
    this.timerFn = null
  }

  created() {
    this.getStatisticsListFn()
  }
  mounted() {
    if (dataAutoLoop) {
      // this.startTimerFn()
    }
  }

  beforeDestroy() {
    this.clearTimerFn()
  }
}
</script>
<style lang="scss" scoped>
.home {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 70px;
  background-color: $color-bg;

  .main {
    display: flex;
    height: 100%;
    padding: 8px 20px 20px;

    .left {
      display: flex;
      margin-right: 10px;
      flex: 1.64;
      flex-direction: column;

      .left-top {
        display: flex;
        flex: 1.79;

        .info {
          flex: 1;
          margin-top: -20px;
        }

        .map {
          display: flex;
          flex: 3;
        }
      }

      .left-bottom {
        display: flex;
        flex: 1;

        .school {
          flex: 1;
        }

        .student {
          flex: 1.03;
        }
      }
    }

    .right {
      display: flex;
      flex: 1;
      flex-direction: column;

      > div {
        flex: 1;

        &:first-child {
          margin-bottom: 0.2rem;
        }
      }
    }
  }
}
</style>
